<template>
    <div class="popCustomer-select">
        <el-dialog title="选择供应商" :visible.sync="dialogVisible" top="5vh">
            <popSearchup
                ref="popSearchup"
                @resetList="resetList"
                @searchList="searchList"
            ></popSearchup>
            <div class="search-box-select">
                <el-form :model="searchform">
                    <el-form-item>
                        <el-select
                            v-model="searchform.typeid"
                            class="sele-w"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in custype_ls_data"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="searchform.orderby"
                            class="sele-w"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in order_ls_data"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="searchform.uid_cp"
                            @change="changeList"
                        >
                            <el-option
                                v-for="item in ucp_ls_data"
                                :key="item.uid"
                                :label="item.name"
                                :value="item.uid"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="list-box" v-infinite-scroll="loadFun">
                <div class="list" v-if="list_data.length > 0">
                    <div
                        class="list-row"
                        v-for="item in list_data"
                        :key="item.id"
                        @click="determineFun(item)"
                    >
                        <div class="img-box">
                            <img v-if="item.avatar" :src="item.avatar" alt="" />
                            <span v-else>{{ item.name.split("")[0] }}</span>
                        </div>
                        <div class="info-box">
                            <div class="title">
                                <span>{{ item.name }}</span>
                                <span v-if="item.company"
                                    >-{{ item.company }}</span
                                >
                            </div>
                            <div class="phone">
                                <span>{{ item.cellphone }}</span>
                            </div>
                            <div class="tiem">
                                <span>{{ item.title }}：</span>
                                <span v-if="searchform.orderby == 6">{{
                                    item.value
                                }}</span>
                                <span v-else
                                    >{{ item.orders ? item.orders : "无"
                                    }}{{
                                        searchform.orderby == 4 ? "笔" : ""
                                    }}</span
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <empty v-else />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import popSearchup from "@/components/comm/popSearchup.vue";
import empty from "../comm/empty.vue";

export default {
    name: "popCustomerSelect",
    components: { popSearchup, empty },
    data() {
        return {
            dialogVisible: false,
            is_soll: false,
            is_search: false,
            list_data: [],
            searchform: {
                typeid: "all",
                orderby: "",
                uid_cp: "",
                is_yy: "1",
                pfrom: -20,
                pnum: 20,
            },
            custype_ls_data: [
                {
                    title: "全部类别",
                    id: "all",
                },
            ],
            order_ls_data: [
                {
                    name: "全部排序",
                    id: "",
                },
            ],
            ucp_ls_data: [
                {
                    name: "全部经手人",
                    uid: "",
                },
            ],
        };
    },

    methods: {
        initData() {
            this.dialogVisible = true;
            if (this.ucp_ls_data.length == 1) {
                this.getUcpls();
            }
            this.$nextTick(() => {
                if (this.$refs.popSearchup.search_type_data.length == 0) {
                    this.$refs.popSearchup.getObjtypels();
                }
            });
        },
        // 搜索的数据
        searchList(data) {
            this.list_data = data.list;
            this.is_soll = data.is_soll;
            this.searchform.pfrom = data.pfrom;
            this.is_search = true;
        },
        // 确认选择供应商
        determineFun(item) {
            this.$emit("getCustomerData", item);
            this.dialogVisible = false;
        },

        // 滚动加载
        loadFun() {
            if (this.is_soll) return;
            this.searchform.pfrom += 20;
            if (this.is_search) {
                this.$refs.popSearchup.loadFun(this.searchform.pfrom);
            } else {
                this.getlistdata();
            }
        },

        // 重置
        resetList() {
            this.$refs.popSearchup.objtypeform = {
                objtype: "name",
                kw: "",
            };
            this.searchform = {
                typeid: "all",
                orderby: "",
                uid_cp: "",
                is_yy: "1",
                pfrom: 0,
                pnum: 20,
            };
            this.emptyData();
            this.getlistdata();
        },

        // 筛选供应商
        changeList() {
            this.emptyData();
            this.getlistdata();
        },

        // 获取供应商列表
        async getlistdata() {
            this.is_soll = true;
            let param = this.searchform;
            let res = await this.$api({ url: config.CG_SUPP_LS, data: param });
            if (res.status == 1) {
                if (res.data.custype_ls) {
                    this.custype_ls_data =
                        this.custype_ls_data.length == 1
                            ? this.custype_ls_data.concat(res.data.custype_ls)
                            : this.custype_ls_data;
                }
                if (res.data.order_ls) {
                    this.order_ls_data =
                        this.order_ls_data.length == 1
                            ? this.order_ls_data.concat(res.data.order_ls)
                            : this.order_ls_data;
                }
                if (res.data.supp_ls) {
                    this.list_data = this.list_data.concat(res.data.supp_ls);
                    setTimeout(() => {
                        this.is_soll = false;
                    }, 200);
                } else {
                    this.is_soll = true;
                }
            }
        },

        // 获取经手人
        async getUcpls() {
            let url = config.UCP_LS;
            let param = {
                md: "yy",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.ucp_ls_data =
                    this.ucp_ls_data.length == 1
                        ? this.ucp_ls_data.concat(res.data)
                        : this.ucp_ls_data;
            }
        },

        // 清空数据
        emptyData() {
            this.searchform.pfrom = 0;
            this.list_data = [];
            this.is_soll = false;
            this.is_search = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.popCustomer-select {
    ::v-deep.search-box-select {
        .el-form {
            display: flex;
        }
        .sele-w {
            margin-right: 10px;
        }
    }
    .list-box {
        height: 500px;
        overflow: auto;
        .list-row {
            padding: 10px 0;
            border-bottom: 1px #f2f2f2 solid;
            display: flex;
            cursor: pointer;
            .img-box {
                width: 80px;
                height: 80px;
                margin-right: 10px;
                border-radius: 5px;
                background: #eaeaea;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                span {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
            .info-box {
                .title {
                    font-size: 14px;
                }
                .phone {
                    font-size: 12px;
                    color: #9c9a9a;
                    margin: 5px 0;
                }
                .tiem {
                    font-size: 12px;
                }
            }
        }
    }
    .list-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .list-box::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #ccc; //rgba(0, 0, 0, 0.0);
        scrollbar-arrow-color: red;
    }
    .list-box::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
    }
}
</style>